/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
import {Scene, Router, Tabs, Stack} from "react-native-router-flux";

import PageOne from './src/PageOne'
import PageTwo from './src/PageTwo'

import Financing from './src/homepage/financing'
import Whitebar from './src/homepage/whitebar'
import Payoff from './src/homepage/payoff'


// const App = () => {
//     return (
//         <Router key="root">
//             <Scene>
//                 <Scene key="PageOneKey"
//                        component={PageOne}
//                        title="PageOne"
//                        initial
//                 />
//                 <Scene
//                     key="PageTwo"
//                     component={PageTwo}
//                     title="PageTwo"
//                 />
//             </Scene>
//         </Router>
//     );
// }

const TabIcon = (props) => {
    return <View>
        <Image style={styles.emojiStyle} source={require('./src/img/emoji.png')}/>
        <Text
            style={{color: props.focused ? 'red' : 'black'}}
        >{props.title}
        </Text>
    </View>


};

const HomeIcon = (props) => {
    return <View>
        <Image style={styles.emojiStyle} source={require('./src/img/emoji.png')}/>
        <Text
            style={{color: props.focused ? 'red' : 'black'}}
        >{props.title}
        </Text>
    </View>


};

const Homepage = () => {
    return (
        <View>
            <Text>123</Text>
            {/*<Scene hideNavBar panHandlers={null}>*/}
            {/*<Tabs*/}
            {/*key="tabbar"*/}
            {/*swipeEnabled*/}
            {/*showLabel={false}*/}
            {/*tabBarStyle={styles.tabBarStyle}*/}
            {/*activeBackgroundColor="white"*/}
            {/*inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"*/}
            {/*// tabBarPosition="bottom"*/}
            {/*>*/}
            {/*<Scene key="Financing" title="理财" component={Financing} icon={HomeIcon}/>*/}
            {/*<Scene key="Whitebar" title="白条" component={Whitebar} hideNavBar icon={HomeIcon}/>*/}
            {/*<Scene key="Payoff" title="支付" component={Payoff} hideNavBar icon={HomeIcon}/>*/}
            {/*</Tabs>*/}
            {/*</Scene>*/}
        </View>

    );
};


const App = () => {
    return (
        <Router>
            <Scene hideNavBar panHandlers={null}>
                <Tabs
                    key="tabbar"
                    swipeEnabled={false}
                    showLabel={false}
                    tabBarStyle={styles.tabBarStyle}
                    activeBackgroundColor="white"
                    inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"
                    tabBarPosition="bottom"
                >
                    <Scene key="Homepage" title="Tab #1" component={Financing} icon={TabIcon}/>

                    <Scene key="tab_2_1" title="Tab #2" component={PageTwo} hideNavBar icon={TabIcon}/>
                    <Scene key="tab_3_1" title="Tab #3" component={PageOne} hideNavBar icon={TabIcon}/>
                    <Scene key="tab_4_1" title="Tab #4" component={PageTwo} hideNavBar icon={TabIcon}/>
                    {/*<Stack key="tab_5">*/}
                    {/*<Scene key="tab_5_1" title="Tab #5" icon={TabIcon}/>*/}
                    {/*</Stack>*/}
                </Tabs>
            </Scene>

        </Router>
    );
};


export default App;


//项目初始的例子
// const instructions = Platform.select({
//     ios: 'Press Cmd+R to reload,\n' +
//     'Cmd+D or shake for dev menu',
//     android: 'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });
//
// export default class App extends Component<{}> {
//     render() {
//         return (
//             <View style={styles.container}>
//                 <Text style={styles.welcome}>
//                     Welcome to React Native!
//                 </Text>
//                 <Text style={styles.instructions}>
//                     To get started, edit App.js
//                 </Text>
//                 <Text style={styles.instructions}>
//                     {instructions}
//                 </Text>
//             </View>
//         );
//     }
// }
//
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    tabBarStyle: {
        // textAlign: 'center'
    },
    emojiStyle: {
        width: 25,
        height: 25,


    }
});
